<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab,nav</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/><link rel="stylesheet" href="../style/weui2.css"/>
      <script src="../zepto.min.js"></script>
<script src="../iscroll.js"></script>
</head>

<body ontouchstart>

        
        <div class="weui_tab " style="height:44px;"><!--tab-fixed添加顶部-->
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item  tab-green">
                    已发货
                </div>
                <div class="weui_navbar_item">
                    未发货
                </div>
                <div class="weui_navbar_item">
                    全部订单
                </div>
            </div>
        </div>
  <p class="divider">我是分割线 </p>
        <div class="weui_tab weui_tab_red"  style="height:44px;">
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item  ">
                    已发货
                </div>
                <div class="weui_navbar_item">
                    未发货
                </div>
                <div class="weui_navbar_item tab-red">
                    全部订单
                </div>
            </div>
        </div>
         <div class="weui_tab weui_tab_blue" style="height:44px;" >
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item tab-blue">
                    选项一
                </div>
                <div class="weui_navbar_item">
                    选项二
                </div>
                <div class="weui_navbar_item">
                    选项三
                </div>
                <div class="weui_navbar_item">
                    选项四
                </div>
                <div class="weui_navbar_item">
                    选项五
                </div>
            </div>
        </div>       
        
  <p class="divider">我是分割线 </p>
        <div class="weui_tab"  style="height:44px;">
            <div class="weui_navbar" style="height:44px;">
                <div class="weui_navbar_item tab-blue">
                    选项一
                </div>
                <div class="weui_navbar_item">
                    选项二
                </div>
                <div class="weui_navbar_item">
                    选项三
                </div>
            </div>
            <div class="weui_tab_bd">
11
            </div>
        </div>
<br>


<div id="tagnav" class="weui-navigator weui-navigator-wrapper">
           <ul class="weui-navigator-list">
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">我爱中国</a></li>
                <li><a href="javascript:;">国内</a></li>
                <li><a href="javascript:;">国际</a></li>
                <li><a href="javascript:;">军事</a></li>
                <li><a href="javascript:;">社会</a></li>
                <li><a href="javascript:;">娱乐</a></li>
                <li><a href="javascript:;">女人</a></li>
                <li><a href="javascript:;">体育</a></li>
                <li><a href="javascript:;">科技</a></li>
                <li><a href="javascript:;">互联网</a></li>
                <li><a href="javascript:;">教育</a></li>
                <li><a href="javascript:;">财经</a></li>
                <li><a href="javascript:;">房产</a></li>
                <li><a href="javascript:;">汽车</a></li>
            </ul>
    </div>
    <script type="text/javascript">
$(function(){
    TagNav('#tagnav',{
        type: 'scrollToFirst',
    });
})


</script>
 <!------------------------------------------------>
<div class="weui_tab tab-bottom" style="height:55px;">
    <div class="weui_tabbar ">
        <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <img src="../images/icon_nav_button.png" alt="">
            </div>
            <p class="weui_tabbar_label">微信</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="../images/icon_nav_msg.png" alt="">
            </div>
            <p class="weui_tabbar_label">通讯录</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="../images/icon_nav_article.png" alt="">
            </div>
            <p class="weui_tabbar_label">发现</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="../images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui_tabbar_label">我</p>
        </a>
        <a href="javascript:;" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="../images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui_tabbar_label">设置</p>
        </a>
    </div>
</div>
        


 
 
 <script src="../example.js"></script> 
</body>
</html>
